import React, { memo } from 'react'
import styles from './index.module.css'
import { NavLink } from 'react-router-dom';
const linkList = [
  {id: 1, title: '机器设备', link: '/setting/device'},
  {id: 2, title: '机械臂列表', link: '/setting/arm'},
  {id: 3, title: '地图管理', link: '/setting/map'},
]
const SettingManage = memo((props) => {
  console.log(props);
  
  return (
    <div className={styles.container}>
      <div className={styles.content_left}>
        {
          linkList.map((item) => (
            <NavLink 
              to={item.link} 
              key={item.id} 
              className={({ isActive, isPending }) =>
                isPending ? styles.navlink_pending : isActive ? styles.navlink_active : styles.navlink
              }
            >
              {item.title}
            </NavLink>
          ))
        }
      </div>
      <div className={styles.content_right}>
        <div className={styles.content_right_content}>
          {props.children}
        </div>
      </div>
    </div>
  )
})

export default SettingManage
